<!--
 * @Description: 嵌套路由
 * @Author: zzj
 * @Date: 2021-10-14 09:31:10
 * @LastEditors: zzj
 * @LastEditTime: 2021-10-18 15:42:18
-->
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>嵌套路由</title>
	<script src="https://unpkg.com/vue@next"></script>
	<script src="https://unpkg.com/vue-router@4"></script>

</head>
<body>
	<div id="app">
		<div>
			<router-link to="/exam">考试</router-link>
			<router-link to="/atten">出勤</router-link>
			<router-link to="/course">课程</router-link>
		</div>
		<hr>
			<!-- 渲染容器 -->
		<router-view></router-view>
	</div>

	<script>
		let Exam = {
			template:`
				<div>
					<h2>考试</h2>	
					<div>
						<div style="float:left;width:200px">
							<div>
								<router-link to="/exam/question">题库</router-link>
							</div>
							<div>
								<router-link to="/exam/exam">考试</router-link>
							</div>
							<div>阅卷</div>	
						</div>
						<div style="margin-left:220px">
							<!-----嵌套-------->
							<router-view></router-view>	
						</div>
					</div>
				</div>
			`
		}
		let Question = {
			template: `
				<div>
					<h2>题库内容。。。。</h2>
				</div>
			`
		}
		let ExamExam = {
			template: `
			<div>
				<h2>考试内容。。。。</h2>
			</div>
		`
		}
		let Atten = {
			template: `
			<div>
				<h2>出勤</h2>
			</div>
		`
		}
		let Course = {
			template: `
				<div>
					<h2>课程</h2>
				</div>
			`
		}
		let router = VueRouter.createRouter({
			// 内部提供了 history 模式的实现。为了简单起见，我们在这里使用 hash 模式。
			history: VueRouter.createWebHashHistory(),
			routes:[
				{
					path:"/exam",
					component:Exam,
					children:[{
						path:'question',
						component:Question
					},{
						path: "exam",
						component: ExamExam,	
					}]
				},
				{
					path:"/atten",
					component:Atten
				},
				{
					path: "/course",
					component: Course
				},
			]
		})

		let app = Vue.createApp({
			data(){
				return {
					msg: "路由"
				}	
			}
		})
		app.use(router);
		app.mount("#app");
	</script>
</body>
</html>